<script lang="ts" setup>
  import { onMounted, reactive, ref, computed } from 'vue'
  import { timeFormatUTC } from '@/utils/formatter'
  import MeDialog from '../dialog/index.vue'
  import MeSearch from '@/components/Search.vue'
  import { useRoute, useRouter } from 'vue-router'
  const route = useRoute()
  let searchArr: Array<{ [key: string]: string }> = reactive([])
  const emit = defineEmits(['fupdate'])
  const ys = {
    instance_id: '实例id',
    duration_start: '会话最小数量',
    duration_end: '会话最大数量',
    health_state: '健康状态'
  }
  let searchData = computed(() => {
    return {
      inputSearch: {
        instance_id: { name: '实例id' },
        duration_start: { name: '会话最小数量' },
        duration_end: { name: '会话最大数量' }
      },
      choseSearch: {
        health_state: {
          name: '健康状态',
          num: 0,
          data: [
            { value: 'Activating', text: 'Activating' },
            { value: 'Active', text: 'Active' },
            { value: 'Error', text: 'Error' }
          ]
        }
      }
    }
  })
  let comingState = ref({} as { [key: string]: string })
  const setSearchArr = (arr: Array<{ [key: string]: string }>) => {
    searchArr.length = 0
    searchArr.push(...arr)
    let obj: { [key: string]: string } = {}
    searchArr.forEach((item) => {
      let temp_arr = item.value.split(';')
      let value_arr: (string | number)[] = []
      temp_arr.forEach((val) => {
        if (val === '是') {
          value_arr.push(1)
        } else if (val === '否') {
          value_arr.push(0)
        } else {
          value_arr.push(val)
        }
      })
      obj[item.key] = value_arr.join(';')
    })
    emit('fupdate', obj)
  }
  const props = defineProps({
    data: Array
  })
  let showDialog = ref(false)
  let dialogData = reactive({})
  const dialogName = ref('实例')
  const showDetails = (row: any) => {
    dialogData = row
    showDialog.value = true
  }
  const closeDetails = () => {
    showDialog.value = false
  }
  if (route.query.health_state && route.query.run == 'Instance') {
    if (typeof route.query.health_state == 'string') {
      comingState.value = {
        key: 'health_state',
        value: route.query.health_state
      }
      setSearchArr([comingState.value])
    }
  }
const refresh = () => {
    searchArr.length = 0
    emit('fupdate')
  }
</script>
<template>
  <div id="table-instance">
    <div class="refresh">
      <div class="search-box">
        <me-search :search="searchData" :ys="ys" :searchConArr="searchArr" @search="setSearchArr"></me-search>
      </div>
      <el-icon @click="refresh()" class="refreshIcon">
        <RefreshLeft />
      </el-icon>
    </div>
    <div class="table-box">
      <el-table
        :data="props.data"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafe', color: '#1d1d1f' }"
        :border="true"
        :default-sort="{ prop: 'created_at', order: 'descending' }"
      >
        <el-table-column label="名称/ID" class-name="elcell" width="360">
          <template #default="scope">
            <el-tooltip effect="dark" :content="scope.row.instance_name" placement="bottom">
              <div class="toDetails" @click="showDetails(scope.row)">
                {{ scope.row.instance_name }}
              </div>
            </el-tooltip>
            <el-tooltip effect="dark" :content="scope.row.instance_id" placement="bottom">
              <div class="id-box">
                {{ scope.row.instance_id }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column property="health_status" label="健康状态">
          <template #default="scope">
            {{ scope.row.health_status ? $t(scope.row.health_status) : '' }}
          </template>
        </el-table-column>
        <el-table-column property="server_session_count" label="会话数量" />
        <el-table-column property="process_count" label="进程数量" />
        <el-table-column property="created_at" label="创建时间" :formatter="timeFormatUTC" sortable />
        <el-table-column property="active_at" label="激活时间" :formatter="timeFormatUTC" sortable />
        <el-table-column property="ip_address" label="ip地址" />
      </el-table>
    </div>
    <transition name="dialog">
      <me-dialog :data="dialogData" :title="dialogName" v-if="showDialog" @close="closeDetails"></me-dialog>
    </transition>
  </div>
</template>
<style lang="scss" scoped>
  .dialog-enter-active {
    transition: all 0.3s ease;
  }

  .dialog-leave-active {
    transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .dialog-enter,
  .dialog-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }

  .table-box {
    border-radius: 2px;
    margin-top: 20px;
  }
  .search-box {
    width: 100%;
  }
  .refresh {
    display: flex;
    justify-content: space-between;
  }
</style>
